<template>
<!--    <div style="margin-bottom: 10px; width: 100%;" :style="{height: max_Height + 'px'}">-->
    <div class="my-scatterDiagram">
        <div class="title">
            <span>{{ form.title }}</span>
        </div>
        <div ref="chart" class="chart"></div>
    </div>
</template>


<script>
import * as echarts from 'echarts'
import {heightConfig3, set_option_scatterDiagram} from "@/utils/loadPage";

// 散点图
export default {
    name: 'MyScatterDiagram',
    data() {
        return {
            max_Height: heightConfig3(),
            form:{
                title: '生活救助',  // 图表标题
                title_center:'center', // 标题位置
                dataList:[] // 所有数据
            },
        }
    },
    mounted() {
        this.handleResize()
        // 组件挂载时监听窗口大小变化事件，并设置定时器定时获取支付信息
        window.addEventListener('resize', this.handleResize);
        this.timer = setInterval(this.handleResize, 10000)
    },
    beforeDestroy() {
        // 组件销毁前移除窗口大小变化事件监听，销毁 ECharts 实例，并清除定时器和 sessionStorage
        window.removeEventListener('resize', this.handleResize);
        if (this.myChart) {
            this.myChart.dispose(); // 销毁 ECharts 实例
        }
        clearInterval(this.timer)
        sessionStorage.clear()
    },

    methods: {
        handleResize() {
            // 处理窗口大小变化事件，重新获取支付信息
            console.log('Window resized');
            this.max_Height = heightConfig3();
            this.get_data();
            this.set_option()
        },

        set_option() {
            // 设置图表选项，如果已有图表实例则销毁旧的，重新初始化并设置新选项
            if (this.myChart) {
                this.myChart.dispose(); // 销毁 ECharts 实例
            }
            this.myChart = echarts.init(this.$refs.chart) // 初始化 ECharts 实例
            let option = set_option_scatterDiagram(this, this.form)
            this.myChart.setOption(option) // 设置图表选项
        },

        get_data() {
            let daysArray = ['维修安装','助餐服务','助洁服务','康复训练','心理辅导','其他'];
            this.form.dataList = [];
            for (let i = 0; i < daysArray.length; i++) {
                let name = daysArray[i];
                let value = Math.floor(Math.random() * 300 + 50); // 生成 50 到 350 之间的随机总数
                this.form.dataList.push({name, value}); // 添加到数据源
            }
        }
    }

}


</script>

<style scoped lang="scss">
.my-scatterDiagram{
    width: 100%;
    height: 99%;
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    box-sizing: border-box;

    .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
        color: #ffffff;
        font-size: 16px;
        font-weight: bold;

        .span{
            color: #40faee;
        }
    }

    .chart {
        width: 99%;
        height: 85%;
        overflow: hidden;
    }
}
</style>
